import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { defineStore } from "pinia";
import { reqGetSearchInterestList, reqInterestList } from "@/api/index";
import { cloneDeep } from "lodash";
const useInterestDialogState = defineStore("useInterestDialog", () => {
  const isShowDialog = ref<boolean>(false); //打开弹窗初始值
  const isSearch = ref<boolean>(false); //是否进入搜索
  const interestList = ref<any>([]); //兴趣列初始数据
  const pageNum = ref<number>(0); //页码
  const pageSize = ref<number>(20); //连续页
  const totalPages = ref<number>(-1); //数据总条数
  const scrollAttrListCopy = ref<any>([]); //以选择的兴趣列表 用户 tabs 栏数据渲染
  const showDialog = () => {
    //打开弹窗
    isShowDialog.value = true;
  };
  const cancelDialog = () => {
    // 关闭弹窗
    isShowDialog.value = false;
    scrollAttrList.value = [];
  };
  const saveBtn = () => {
    isShowDialog.value = false;
    scrollAttrListCopy.value = cloneDeep(scrollAttrList.value);
  };
  /**----------------------------  请求初始数据  --------------------------- */
  const initInterestList = async () => {
    try {
      const result = await reqInterestList(pageNum.value, pageSize.value);
      interestList.value = result.content;
      totalPages.value = result.totalPages;
    } catch (error: any) {
      ElMessage.error(error.value);
    }
  };
  onMounted(() => {
    initInterestList();
  });
  //添加数据到 interestList
  const addInterestList = async () => {
    if (interestList.value.length >= totalPages.value) return;
    pageNum.value++;
    try {
      const result = await reqInterestList(pageNum.value, pageSize.value);
      interestList.value.push(...result.content);
    } catch (error: any) {
      ElMessage.error(error.value);
    }
  };
  /*-----------------------------   无限滑动列表逻辑   -------------------------*/
  const load = () => {
    addInterestList();
  };

  const scrollAttrList = ref<any>([]); //被选中的数组
  const addScrollAttrList = (info: any) => {
    const index = scrollAttrList.value.findIndex(
      (item: any) => item.id === info.id
    );
    if (index > -1) {
      scrollAttrList.value.splice(index, 1);
      return;
    }
    if (scrollAttrList.value.length >= 7) {
      return ElMessage.warning("最多添加7个兴趣技能");
    }
    scrollAttrList.value.push(info);
  };
  const removeScrollAttrList = (idx: number) => {
    scrollAttrList.value.splice(idx, 1);
  };
  /**--------------------------------  点击兴趣弹框搜索按钮  ------------------------------- */
  const searchBtn = () => {
    if (!searchName.value.trim()) return ElMessage.error("搜索值不能为空");
    isShowDialog.value = false;
    isSearch.value = true;
    saveSearchName()
  };
  /**---------------------------------  点击搜索弹框返回标题 -------------------------*/
  const resultSearchBtn = () => {
    isSearch.value = false;
    isShowDialog.value = true;
  };
  /**----------------------------------  搜索弹窗部分逻辑  --------------------------- */
  const searchList = ref<any>([]); //搜索结果的初始值
  const searchName = ref<string>("");
  const getSearchList = async () => {
    try {
      const result = await reqGetSearchInterestList(searchName.value);
      searchList.value = result.content;
    } catch (error: any) {
      ElMessage.error(error.value);
    }
  };
  const saveSearchName = () => {
    searchList.value = []
    //点击搜索按钮
    if (!searchName.value.trim()) return ElMessage.error("搜索值不能为空");
    getSearchList();
  };
  /**------------------  数据暴露  ------------------------------------------- */
  return {
    isShowDialog,
    scrollAttrList,
    isSearch,
    interestList,
    scrollAttrListCopy,
    searchList,
    searchName,
    showDialog,
    cancelDialog,
    load,
    addScrollAttrList,
    removeScrollAttrList,
    searchBtn,
    resultSearchBtn,
    saveBtn,
    getSearchList,
    saveSearchName,
  };
});
export default useInterestDialogState;
